<template>
  <!-- 左侧功能页 -->
  <div class="decoratePage">
    <div class="selectComponent">
      <div class="left-list">
        <div class="left-list-title weight">页面组件</div>
      </div>
      <div class="left-list btn" @click="addBanner">
        <div class="left-list-icon">
          <i class="el-icon-picture-outline" />
        </div>
        <div class="left-list-title">图片广告</div>
      </div>
      <div class="left-list btn" @click="addNavImg">
        <div class="left-list-icon">
          <i class="el-icon-s-order" />
        </div>
        <div class="left-list-title">图文导航</div>
      </div>
      <div class="left-list btn" @click="addStudy">
        <div class="left-list-icon">
          <i class="el-icon-s-management" />
        </div>
        <div class="left-list-title">知识商品</div>
      </div>
      <div class="left-list btn" @click="addLive">
        <div class="left-list-icon">
          <i class="el-icon-video-camera" />
        </div>
        <div class="left-list-title">直播</div>
      </div>
      <div class="left-list btn" @click="addNewest">
        <div class="left-list-icon">
          <i class="el-icon-magic-stick" />
        </div>
        <div class="left-list-title">最新</div>
      </div>
    </div>
    <div class="phonePreview">
      <el-card>
        <div class="nav-box">
          <div class="nav-content">
            <div class="nav-img">
              <img :src="navForm.logoImg" alt />
            </div>
            <div v-for="(val, num) in navForm.navList" :key="num" class="nav-list">
              <div class="nav-item">
                <a :href="val.link">{{ val.navTitle }}</a>
              </div>
            </div>
          </div>
          <div class="nav-btn">
            <i v-if="navForm.showSearch=='show'" class="el-icon-search" />
            <i class="el-icon-goods" />
            <i class="el-icon-time" />
            <i class="el-icon-user" />
          </div>
        </div>
      </el-card>
      <div class="sortableList">
        <vuedraggable
          v-model="formList"
          class="wrapper"
          handle=".left-view"
          animation="300"
          @end="endMove"
        >
          <transition-group>
            <div
              v-for="(item, index) in formList"
              :key="index"
              class="sortableItem"
              @click.stop="leftClick(index)"
            >
              <div :class="leftIndex == index ? 'active' : ''" class="item-preview">
                <div class="headerPreview">
                  <!--删除按钮-->
                  <div v-if="leftIndex == index" class="close" @click.stop @click="close(index)">
                    <img src="/src/assets/settinyschool/delete.png" alt />
                  </div>
                  <!--图片广告左侧预览组件-->
                  <slideShow v-if="item.type == 'banner'" :list="formList" :left-index="index" />
                  <navImg v-if="item.type == 'navImg'" :list="formList" :left-index="index" />
                  <study v-if="item.type == 'study'" :list="formList" :left-index="index" />
                  <live v-if="item.type == 'live'" :list="formList" :left-index="index" />
                  <newest v-if="item.type == 'newest'" :list="formList" :left-index="index" />
                </div>
              </div>
            </div>
          </transition-group>
        </vuedraggable>
      </div>
    </div>
    <div class="foot-btn">
      <el-button @click="cancelForm">取消</el-button>
      <el-button type="primary" @click="saveForm">保存</el-button>
    </div>
  </div>
</template>

<script>
import vuedraggable from 'vuedraggable' // 拖拽组件
import slideShow from './decoratepage/slideshow'
import navImg from './decoratepage/navimg'
import study from './decoratepage/study'
import live from './decoratepage/live'
import newest from './decoratepage/newest'
export default {
  components: {
    vuedraggable,
    slideShow,
    navImg,
    study,
    live,
    newest
  },
  data() {
    return {
      leftIndex: 0,
      navForm: {
        showSearch: 'show',
        logoImg: '/src/assets/analyze_data/header_bg_2.png',
        navList: [
          {
            navTitle: '首页',
            linkName: '',
            link: ''
          }
        ]
      },
      formList: [
        {
          type: 'banner',
          showRight: false,
          layout: 'banner',
          banner: [
            {
              link: '',
              linkName: '',
              imgUrl: '/src/assets/analyze_data/header_bg_2.png'
            },
            {
              link: '',
              linkName: '',
              imgUrl: '/src/assets/analyze_data/banner_img_default.png'
            }
          ],
          menu: [
            {
              title: '一级导航',
              secondList: [
                {
                  title: '二级导航',
                  explain: '二级导航说明'
                }
              ]
            }
          ]
        },
        {
          type: 'navImg',
          showRight: false,
          imgList: [
            {
              imgUrl: '/src/assets/analyze_data/nav_img_default.png',
              link: '',
              linkName: ''
            },
            {
              imgUrl: '/src/assets/analyze_data/nav_img_default.png',
              link: '',
              linkName: ''
            },
            {
              imgUrl: '/src/assets/analyze_data/nav_img_default.png',
              link: '',
              linkName: ''
            },
            {
              imgUrl: '/src/assets/analyze_data/nav_img_default.png',
              link: '',
              linkName: ''
            }
          ]
        },
        {
          type: 'study',
          showRight: false,
          showTitle: 'show',
          showMore: true,
          maxLength: '50',
          title: '知识商品',
          articleList: []
        }

      ]
    }
  },
  methods: {
    endMove(evt) {
      this.leftIndex = evt.newIndex
    },
    leftClick(index) {
      this.leftIndex = index
      for (let i = 0; i < this.formList.length; i++) {
        this.formList[i].showRight = false
        this.$set(this.formList, i, this.formList[i])
      }
      // this.$set(that.list,that.list)
      this.formList[this.leftIndex].showRight = true
    },
    // 删除列表
    close() {
      this.$confirm('确认删除当前组件吗', '提示', {
        confirmButtonText: '确定',
        cancleButtonText: '取消'
      }).then(() => {
        this.formList.splice(this.leftIndex, 1)
      })
    },
    // 添加图片广告
    addBanner() {
      this.formList.push({
        type: 'banner',
        showRight: false,
        layout: 'banner',
        banner: [
          {
            link: '',
            linkName: '',
            imgUrl: '/src/assets/analyze_data/banner_img_default.png'
          },
          {
            link: '',
            linkName: '',
            imgUrl: '/src/assets/analyze_data/banner_img_default.png'
          }
        ],
        menu: [
          {
            title: '一级导航',
            secondList: [
              {
                title: '二级导航',
                explain: '二级导航说明'
              }
            ]
          }
        ]
      })
    },
    // 添加导航图片
    addNavImg() {
      this.formList.push({
        type: 'navImg',
        showRight: false,
        imgList: [
          {
            imgUrl: '/src/assets/analyze_data/nav_img_default.png',
            link: '',
            linkName: ''
          },
          {
            imgUrl: '/src/assets/analyze_data/nav_img_default.png',
            link: '',
            linkName: ''
          },
          {
            imgUrl: '/src/assets/analyze_data/nav_img_default.png',
            link: '',
            linkName: ''
          },
          {
            imgUrl: '/src/assets/analyze_data/nav_img_default.png',
            link: '',
            linkName: ''
          }
        ]
      })
    },
    // 添加知识商品
    addStudy() {
      this.formList.push({
        type: 'study',
        showRight: false,
        showTitle: 'show',
        showMore: true,
        maxLength: '50',
        title: '知识商品',
        articleList: []
      })
    },
    // 添加直播
    addLive() {
      this.formList.push({
        type: 'live',
        showRight: false,
        showTitle: 'show',
        showMore: true,
        maxLength: '50',
        title: '直播',
        liveList: []
      })
    },
    // 添加最新
    addNewest() {
      this.formList.push({
        type: 'newest',
        showRight: false,
        showTitle: 'show',
        source: 'default',
        title: '最新',
        articleList: [
          {
            imgUrl: '/src/assets/analyze_data/operation.png',
            title: '知识商品标题',
            content: '知识商品内容',
            tag: '音频',
            price: '0'
          },
          {
            imgUrl: '/src/assets/analyze_data/operation.png',
            title: '知识商品标题',
            content: '知识商品内容',
            tag: '音频',
            price: '10'
          },
          {
            imgUrl: '/src/assets/analyze_data/decorate.png',
            title: '知识商品标题',
            content: '知识商品内容',
            tag: '视频',
            price: '20'
          }
        ]
      })
    },

    cancelForm() {
      this.$router.go(-1)
    },
    saveForm() {
      this.$message({
        type: 'success',
        message: '保存成功'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.decoratePage {
  padding: 10px;
  position: relative;
  .selectComponent {
    position: relative;
    float: left;
    width: 90px;
    height: 670px;
    margin-right: 20px;
    padding: 10px 0 0;
    color: #353535;
    font-size: 14px;
    background: #f9f9f9;
    border: 1px solid #e5e5e5;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    .left-list {
      color: #555555;
      display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: center;
      padding: 14px 0;
      height: 80px;
      border-bottom: 1px solid #eee;
      .left-list-icon {
        margin-bottom: 10px;
        i {
          font-size: 30px;
        }
      }
      .left-list-title {
        font-size: 14px;
      }
      .left-list-title.weight {
        font-size: 14px;
        font-weight: bold;
      }
    }
    .left-list.btn {
      cursor: pointer;
    }
    .left-list.btn:hover {
      color: #2a75ed;
    }
  }
  .phonePreview {
    position: relative;
    float: left;
    width: 70%;
    height: 808px;
    // padding: 0 300px 0 0;
    // overflow-x: hidden;
    // overflow-y: scroll;
    .nav-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .nav-content {
        display: flex;
        .nav-img {
          width: 140px;
          height: 40px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .nav-list {
          display: flex;
          align-items: center;
          margin-left: 40px;
          .nav-item {
            margin: 0 20px;
          }
        }
      }
      .nav-btn {
        i {
          font-size: 18px;
          padding: 5px;
        }
      }
    }
    .sortableList {
      margin: 0;
      padding: 10px 30px;
      border: 1px solid #eee;
      height: 760px;
      overflow: auto;
      padding-bottom: 30px;
      .sortableItem {
        position: relative;
        width: 100%;
        margin-bottom: 10px;
        .item-preview {
          position: relative;
          width: 100%;
          border: 1px dashed transparent;
          .headerPreview {
            // width: 375px;

            .close {
              z-index: 5;
              position: absolute;
              top: -10px;
              right: -10px;
              width: 20px;
              cursor: pointer;
              img {
                width: 100%;
              }
            }
          }
        }
        .item-preview.active {
          border: 1px dashed #2a75ed;
        }
      }
    }
  }
  .foot-btn {
    position: fixed;
    bottom: 0;
    box-sizing: border-box;
    width: calc(100vw - 180px);
    height: 60px;
    line-height: 60px;
    border-top: 1px solid #eee;
    text-align: center;
    background-color: #fff;
    z-index: 9;
  }
  @media screen and (max-width: 1600px) {
    .selectComponent {
      margin-right: 10px;
    }
    .phonePreview {
      width: 68%;
      height: 670px;
      .sortableList {
        height: 588px;
        padding-bottom: 0px;
      }
    }
  }
}
</style>
